<template>
  <div id="order-detail-buyer">
    <!-- 导航栏 -->
    <van-nav-bar @click-left="back" class="navbar">
      <template #left>
        <van-icon name="arrow-left" size="18" color="#f7f8fa" />
      </template>
    </van-nav-bar>

    <!-- 订单详情 -->
    <div class="container" @load="onLoad">
      <van-cell-group class="seller-info">
        <template #title>
          <span class="group-title">{{order.id}}</span>
        </template>
      </van-cell-group>

      <van-cell-group class="cell-group">
        <van-cell title="总金额" value-class="total" :value="order.sum + ' CNY'"/>
        <van-cell title="交易数量" :value="order.num"  />
        <van-cell title="单价" :value="order.price"/>
        <van-cell title="创建时间" :value="order.time" />
      </van-cell-group>
    </div>

    <van-tabbar v-model="active" active-color="#545c80" inactive-color="#545c80">
      <!--<van-tabbar-item class="center">-->
        <!--<span>剩余时间</span>-->
        <!--<van-count-down :time="time" class="count-down" />-->
      <!--</van-tabbar-item>-->
      <!--<van-tabbar-item icon="back-top">确认上传</van-tabbar-item>-->
    </van-tabbar>
  </div>
</template>

<script>
  import store from '@/store';
  import axios from 'axios';

  export default {
    name: "OrderDetail",
    data() {
      return {
        active: 0,
        fileList: [],
        name: '页面出错，请联系工程师',
        phone: '',
        count: 0.0,
        num: 0,
        price: 0.0,
        id: 0,
        time: 0,
        order: {},
      };
    },
    methods: {
      onLoad(){
      },
      back() {
        this.$router.back(-1);
      },
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
      }
    },
      mounted() {
        // 获取订单详情
        axios.get(store.state.api + '/market/getOrderDetails', {
          params: {
            orderId: this.$route.params.id,
            uid: this.$route.params.uid,
          }
        }).then(res => {
          if (res.data.code == '200') {
            this.order = res.data.data;
          }
        }).catch(error => {

        });
      },
  }


</script>

<style scoped>
  .navbar {
    background-color: #545c80;
  }

  /* 主体 */
  .container {
    position: fixed;
    top: 44px;
    bottom: 50px;
    width: 100%;
    overflow: auto;
    background-color: #fff;
  }
  .seller-info .van-cell {
    background-color: #F6F7FB;
  }
  .group-title {
    color: #2E4356;
    font-size: 20px;
    margin: 10px 0;
    display: inline-block;
    font-weight: 700;
  }
  .progress {
    color: #7486AA;
    float: right;
    margin: 10px 0;
    display: inline-block;
    font-weight: 700;
  }
  .van-cell,.van-cell__value {
    color: #9FA6AE;
  }
  .van-cell__value {
    color: #585D61;
  }
  .seller-info {
    margin: 0 15px 15px;
  }
  .van-cell::after {
    border: none;
  }
  .cell-group::after {
    border: none;
  }
  .total {
    color: #7486AA;
    font-size: 20px;
  }

  /* 倒计时 */
  .count-down {
    color: #545c80;
    font-size: 14px;
  }
  .center {
    text-align: center;
  }
</style>
